<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/font.css">
    <style>
        *{
            margin: 0;
        }
        .layout{
            width: 1190px;
            margin: 0 auto;
        }
        .ov{
            overflow: hidden;
        }
        .iconfont{
            font-family: "iconfont";
        }
        /* 顶部导航栏 */
        .nav_wrap {
            background-color: #f5f5f5;
            font-size: 12px;
        }
        
        .address_icon{
            color: orange;
            font-size: 16px;
        }
        .nav_content{
            overflow: hidden;
        }
        .nav_left{
            float: left;
            padding: 10px 0;
        }
        .nav_left a, .nav_right a{
            margin: 0 7px;
        }
        .nav_right{
            float: right;
            padding: 10px 0;
        }
        .nav_left a:hover {
            color: orange;
        }
        .nav_right a:hover{
            color: orange;
        }
        /*左侧边导航  */
        .left_nav{
            position: fixed;
            bottom: 100px;
        }
        .left_nav li{
            background-color: #f8f8f8;
            padding: 7px;
            border: 1px solid #e8e8e8;
        }
        .left_nav a{
            font-size: 14px;
        }
        .left_nav li:hover a{
            color:orange;
        }
        /* logo容器 */

        .logo_wrap{
            overflow: hidden;
            padding: 28px 0;
        }
        .logo_wrap>div{
            float: left;
        }
        .input_title_wrap{
            margin-left: 150px;
        }
        .input_wrap{
            font-size: 0;
        }
        .search_input{
            
            width: 420px;
            border: 2px solid #ff6500;
            height: 36px;
            text-indent: 16px;
            outline: none;
            vertical-align: middle;
        }
        /* 输入框 */
        .search_input::placeholder{
            color: #ccc;
        }
        /* 搜索 */
        .search_btn{
            width: 118px;
            height: 42px;
            border: none;
            background-color: #ff6500;
            color: white;
            font-size: 20px;
            vertical-align: middle;
        }
        .hotsearch_wrap{
            margin-top: 10px;
            font-size: 10px;
        }
        .hotsearch_wrap span{
            color: #333333;
            font-size: 12px;
        }
        .hotsearch_wrap span{
            padding: 0 10px;
            border-right: 1px solid black;
            /* 改变鼠标在标签身上的样式 (pointer是小手) */
            /* a标签默认的cursor的值就是这个 */
            cursor: pointer;
        }
        /* 先拿到.hot_search_wrap下的span, 再提取第一个, 如果是span则生效 */
        .hotsearch_wrap span:first-child{
            padding-left: 0px;
        }
        .hotsearch_wrap span:last-child{
            border: none;
        }
        .hotsearch_wrap span:hover{
            color: orange;
        }
        /* 轮播导航 */
        .category_top_wrap{
            overflow: hidden;
        }
        .category_top, .category_choose{
            float: left;
        }
        .category_top{
            color: white;
            padding: 15px 80px 15px 15px;
            background-color: #ff6500;
            font-size: 14px;
            width: 200px;
            box-sizing: border-box;
        }
        .category_choose{
            margin-left: 20px;
            padding: 15px 0;
            font-size: 14px;
            font-weight: 900;
        }
        .category_choose a{
            margin: 0 10px;
        }
        .banner_wrap{
            /* 背景不算内容, 所以必须有宽高, 才会显示背景图 */
            background: #f33853 url("./images/banner.jpg") center center no-repeat;
        }
        /* 分类导航 */
        .category_wrap{
            background-color: #262221;
            width: 200px;
            padding: 0 10px;
            box-sizing: border-box;
            float: left;
        }
        .category_wrap li{
            padding: 8px 0;
        }
        .category_wrap a{
            font-size: 14px;
            color: white;
        }
        .category_wrap i{
            color: #6e6a69;
        }
        .banner_info{
            float: left;
            font-family: "iconfont";
            width: 990px;
        }
        .banner_info span:first-child{
            position: absolute;
            left: 400px;
            top: 60%; 
            transform: translate(0, -50%);
        }
        .banner_info span:last-of-type{
            position: absolute;
            right: 300px;
            top: 60%;
        }
        /* 轮播图上的a标签 */
        .banner_info a{
            float: left;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #ccc;
            margin: 0 5px;
        }
        .dian_wrap{
            position: absolute;
            left: 50%;
            bottom: 80px;
            transform: translate(-50%, 0);
        }
        .dian_wrap a:hover{
            background-color: orange;
        }
        /* main内容 */
        .main{
            background-color: #f2f2f2;
            padding-top: 20px; 
        }
        /* 限时抢购 */
        .shopping{
            margin-top: 20px;
        }
        .shopping_left,.shopping_right{
            float: left;
        }
        .shopping_left{
            width: 790px;
            background-color: white;
            padding: 20px 20px 15px;
            box-sizing: border-box;
        }
        .shopping_top{
            border-bottom: 1px solid #f6f6f6;
            padding-bottom: 10px;
        }
        .shopping_top_title{
            float: left;
        }
        .shopping_top_title span{
            vertical-align: middle;
        }
        .shopping_top_title>span:first-of-type{
            color: #ff0000;
            font-size: 25px;
        }
        .shopping_top_title>span:nth-of-type(2){
            font-size: 12px;
        }
        .shopping_top_title>span:nth-of-type(n+3){
            color: white;
            background-color: #333;
            padding: 5px;
        }
        .shopping_top_time{
            float:right;
        }
        .shopping_top_time span{
            font-size: 14px;
            vertical-align: middle;
        }
        .shopping_top_time span:first-of-type{
            color: white;
            background-color: #f22;
            border-radius: 31px;
            padding: 0 10px;
            margin-right: 30px;
        }
        
        .shopping_bottom{
            /* white-space: nowrap; */
            font-size: 0;
            
        }
        .shopping_bottom>div{
            float: left;
        }
        .shopping_item{
            margin: 0 10px;
            display:inline-block;
            overflow: hidden;
            width: 160px;
            padding: 15px;
            box-sizing: border-box;
        }
        .shopping_item img{
            width: 170px;
        }
        .shopping_item p:first-of-type{
            font-size: 14px;
        }
        .price_wrap{
            margin-top: 10px;
        }
        .price_wrap span:first-of-type{
            font-size: 20px;
            color: #ff6600;
        }
        .price_wrap span:last-of-type{
            font-size: 14px;
            color: #999;
        }
        .price_wrap p:last-of-type{
            font-size: 14px;
            color: #999;
            text-align: right;
        }


        .shopping_right{
            width: 390px;
            background-color: white;
            margin-left: 10px;
            padding: 13px;
            box-sizing: border-box;
        }
        
        .shopping_right_top{
            font-size: 14px;
            padding-bottom: 10px;
            border-bottom: 1px solid #f6f6f6;
        }
        
        .shopping_right_top span:first-of-type{
            font-size: 25px;
            float: left;
        }
        .shopping_right_top span:last-of-type{
            float: right;
            line-height: 25px;
            /* padding: 4.5px 0; */
        }
        .shopping_right_buttom{
            margin-top: 25px;
        }
        .srb_big_img{
            background-image: url("./images/banner01.jpg");
            background-size: 100% 100%;
            width: 350px;
            height: 175px;
            position: relative;
        }
       .srb_border {
            width: 180px;
            height: 100px;
            border: 1px solid white;
            border-radius: 10px 24px 10px 24px;
            position: absolute;
            top: 45px;
            left: 25px;
            padding: 5px;
            box-sizing: border-box;
        } 
        .srb_content{ 
            width: 168px;
            
             background-color: white;
            border-radius: 10px 24px 10px 24px;
            text-align: center;
            padding: 8.25px 0;
        }
        .srb_content img{
            width: 65px;
        } 
         .srb_content p:first-of-type{
            font-size: 20px;
        } 
         .srb_content p:nth-of-type(2){
            margin-top: 5px;
            font-size: 14px;
        } 
         .srb_content p:nth-of-type(2) span:nth-of-type(2){
            color: red;
        }
        .srb_small_img{
            margin-top: 10px;
        }
        .srb_small_img div{
            float: left;
            padding: 0 9px 5px;
            text-align: center;
            border: 1px solid #ccc;
            font-size: 14px;
            margin-right: 10px;
        }
        .srb_small_img div:last-of-type{
            margin-right: 0;
        }
        .srb_small_img img{
            width: 90px;
        } 
        /* 排行版 */
        .ranking_hot_wrap{
            margin-top: 20px;
        }
        .ranking_left, .hot_right{
            float: left;
        }
        .ranking_left{
            width: 390px;
            background-color: white;
            margin-right: 10px;
        }
        .hot_right{
            width: 790px;
            background-color: white;
        }
        .ranking_top>p:first-of-type{
            padding: 15px 15px 15px 0;
            background-color: #fdf6f6;
            overflow: hidden;
        }
       .ranking_top>p:first-of-type>span:first-of-type{
            float: left;
            border-left: 5px solid #DB5757;
            padding-left: 20px;
            color: #db5757;
            font-size: 18px;
        }
        .ranking_top>p:last-of-type{
            padding: 10px 0;
            margin: 0 20px;
            font-size: 14px;
            margin-top: 10px;
            border-bottom: 1px solid #f8f8f8;
        }
        .ranking_top>p:last-of-type>span{
            padding: 0 10px;
        }
        .ranking_top>p:last-of-type>span:first-of-type{
            background-color: #f86e6e;
            border-radius: 12px;
            color: white;
        }
        /* 排行榜商品列表 */
        .ranking_list{
            width: 350px;
            padding: 6px 20px 6px 20px;
        }
        .ranking_item>div{
            float: left;
        }
        .ranking_item>div:last-of-type{
            width: 240px;
            margin-left: 20px;
            padding: 15px 0;
        }
        .ranking_item img{
            width: 90px;
        }
        .ranking_goods_price{
            margin-top: 15px;
        }
        .ranking_goods_price span:first-of-type{
            color: #db5757;
            float: left;
            line-height: 24px;
        }
        .ranking_goods_price span:last-of-type{
            color: #db5757;
            padding: 5px 10px;
            border-radius: 12px;
            background-color: #ffdfdf;
            float: right;
        }
        .more {
            font-size: 14px;
            float: right;
            line-height: 25px;
            color: #5a626f;
        }
        /* 人气好货 */
        .hot_right>p{
            background-color: #f7faf9;
            padding: 15px 15px 15px 0;
        }
        .hot_right span:first-of-type{
            font-size: 18px;
            /* 浮动元素, 可以让行高=标签的高(去掉行间距) */
            float: left;
            transform: translate(0, 2px);
            padding-left: 10px;
            border-left: 5px solid #1498E3;
            color: #1498E3;
        }
        .hot_right_content{
            padding: 13.5px;
        }
        .hot_item{
            float: left;
            width: 190px;
            text-align: center;
            border-right: 1px solid #f8f8f8;
            border-bottom: 1px solid #f8f8f8;
            padding-bottom: 15px;
        }
        .hot_item img{
            width: 110px;
        }
        .hot_right_content>.hot_item:nth-child(4n){
            border-right: none;
        }
        .hot_right_content>.hot_item:nth-child(n + 5){
            border-bottom: none;
        }
        .hot_item>p:last-of-type{
            color: #1498E3;
            margin-top: 10px;
        }


        /* 小广告 */
         .gg_one{
            margin-top: 20px;
            
        } 
        .gg_one img{
            width: 396.6666667px;
            border: none;
            display: block;
            float: left;
        }
        .gg_two{
            margin-top: 20px;
        } 
        .gg_two_lfet,.gg_two_right{
           float: left;
        }
        .gg_two_lfet{
            width: 190px;
            height: 260px;
            background-image: url("./images/find01.png");
            text-align: center;
            color: white;
            font-size: 12px;
        }
        .gg_two_lfet_centent{
            widows: 160px;
            margin: 0 auto;
            padding: 55px 0 10px 0;
            background-image: url("./images/find02.png");
            background-position: center;
            border-bottom-right-radius: 30px;

        }
        .gg_two_right{
            width: 990px;
            margin-left: 10px;
            background-color: white;
            padding: 20px;
            box-sizing: border-box;
        }
        .gg_two_right>div{
             width: 150px;
             margin-right: 50px;
             float: left;
             text-align: center;
             font-size: 14px;
        }
        .gg_two_right>div:last-of-type{
             margin-right: 0px;
         }
         /* 1 3 5 n为0 */
         .gg_two_right>div:nth-of-type(2n+1){
             padding-top: 50px;
         }
         /* 商品分类 */
          .goods{
             margin-top: 20px;
             
         } 
         .goods>div:first-of-type{
             margin-right: 10px;
         }
         .goods_item{
             width: 590px;
             background-color: white;
             float: left;
         }
         .goods_title_wrap{
             padding: 15px 15px 15px 0;
             background-color: #f9f9f9;
         }
         .goods_title_left{
             border-left: 5px solid #3299cc;
             padding-left: 10px;
             color: #3299cc;
             font-size: 18px;
             float: left;
         }
         .goods_title_right{
             float: right;
             font-size: 14px;
             color: #666;
             padding: 2px 0;
         }
         .goods_title_right>span{
             margin: 0 5px;
         }
         
         .goods_main_left{
             width: 190px;
             padding: 248px 0 50px 0;
             background-image: url(./images/b_img1.jpg);
             /* cover保持背景图片的横从比例 */
             /* 100% 1005 */
             background-size: cover;
         }
         .goods_main_left,.goods_main_right{
            float: left;
         }
         .goods_main_left>div{
             color:white;
             widows: 120px;
             background-color: rgba(0, 0, 0, 0.5);
             padding: 10px 12px;
             border-radius: 0 10px 10px 0;
         }
         .goods_main_left>div p{
             margin: 12px 0 0 0;
         }
         .goods_main_left>div p:first-of-type{
             font-size: 20px;
         }
         .goods_main_left>div p:last-of-type{
             font-size: 12px;
         }
         /* 汽车 */
         .goods_main_left_l{
             width: 190px;
             padding: 248px 0 50px 0;
             background-image: url(./images/b_img2.jpg);
             background-size: cover;
         }
         .goods_main_left_l{
            float: left;
         }
         .goods_main_left_l>div{
             color:white;
             widows: 120px;
             background-color: rgba(0, 0, 0, 0.5);
             padding: 10px 12px;
             border-radius: 0 10px 10px 0;
         }
         .goods_main_left_l>div p{
             margin: 12px 0 0 0;
         }
         .goods_main_left_l>div p:first-of-type{
             font-size: 20px;
         }
         .goods_main_left_l>div p:last-of-type{
             font-size: 12px;
         }

         .goods_main_right_item{
             float: left;
            width: 190px;
            text-align: center;
            border-right: 1px solid #f8f8f8;
            border-bottom: 1px solid #f8f8f8;
         }
         .goods_main_right_item img{
             width: 120px;
         }
         .goods_main_right_item p{
             margin: 14px 9.5px 0;
         }
        .goods_main_right_item p:first-of-type{
            font-size: 16px;
            color: #333;
         }
         .goods_main_right_item p:last-of-type{
             font-size: 14px;
             color: #3299cc;
         }
         /* 棕色商品分类 */
         .goods_title_left_b{
             border-left: 5px solid #b15641;
             padding-left: 10px;
             color: #b15641;
             font-size: 18px;
             float: left;
         }
         /* 棕色字体 */
         .goods_main_right_item_b{
             float: left;
            width: 190px;
            text-align: center;
            border-right: 1px solid #f8f8f8;
            border-bottom: 1px solid #f8f8f8;
         }
         .goods_main_right_item_b img{
             width: 120px;
         }
         .goods_main_right_item_b p{
             margin: 14px 9.5px 0;
         }
        .goods_main_right_item_b p:first-of-type{
            font-size: 16px;
            color: #333;
         }
         .goods_main_right_item_b p:last-of-type{
             font-size: 14px;
             color: #b15641;
         }
         /* 生活家电 */
         .goods_main_left_b_l{
             width: 190px;
             padding: 248px 0 50px 0;
             background-image: url(./images/b_img3.jpg);
             background-size: cover;
         }
         .goods_main_left_b_l{
            float: left;
         }
         .goods_main_left_b_l>div{
             color:white;
             widows: 120px;
             background-color: rgba(0, 0, 0, 0.5);
             padding: 10px 12px;
             border-radius: 0 10px 10px 0;
         }
         .goods_main_left_b_l>div p{
             margin: 12px 0 0 0;
         }
         .goods_main_left_b_l>div p:first-of-type{
             font-size: 20px;
         }
         .goods_main_left_b_l>div p:last-of-type{
             font-size: 12px;
         }
         /* 健康 */
         .goods_main_left_b_r{
             width: 190px;
             padding: 248px 0 50px 0;
             background-image: url(./images/b_img4.jpg);
             background-size: cover;
         }
         .goods_main_left_b_r{
            float: left;
         }
         .goods_main_left_b_r>div{
             color:white;
             widows: 120px;
             background-color: rgba(0, 0, 0, 0.5);
             padding: 10px 12px;
             border-radius: 0 10px 10px 0;
         }
         .goods_main_left_b_r>div p{
             margin: 12px 0 0 0;
         }
         .goods_main_left_b_r>div p:first-of-type{
             font-size: 20px;
         }
         .goods_main_left_b_r>div p:last-of-type{
             font-size: 12px;
         }
         /* floor */
         .floor{
             margin-top: 20px;
             widows: 1190px;
             height: 300px;
         }
         .floor_top{
             font-weight: bold;
             padding-left: 12px;
             background-color: #f9f9f9;
             border-left: 5px solid #fe9901;
         }
         /* 三只松鼠 */
         .floor_buttom{
            background-color: white;
            margin-top: 20px;
         }
          .floor_buttom_goods{
              width: 200px;
              float: left;
              padding: 18px;
              border-right: 1px solid #f8f8f8;
              border-bottom: 1px solid #f8f8f8;
              overflow: hidden;
          }
          .floor_buttom_goods_t{
              width: 200px;
          }
          .floor_buttom_goods_t>img{
                width: 200px;
                transition: all .5s;
          }
          .floor_buttom_goods_t>img:hover{
              transform: scale(1.05);

          }
          .floor_buttom_goods>p:first-of-type{
            text-align: center;
              font-size: 12px;
              color: #333;
              margin-top: 5px;
          }
          .floor_buttom_goods_b{
              color: #ff6500;
              font-size: 16px;
              margin-top: 10px;
          }
          .floor_buttom_goods_b>span:last-of-type{
              border: 1px solid #f60;
              border-radius: 4px;
              float: right;
              font-size: 14px;
              padding: 3px 2px;
          }
          .floor_buttom_goods_bb{
              margin-top: 5px;
          }
          .floor_buttom_goods_bb>span{
              background-color: #ff4400;
              font-size: 12px;
              border-radius: 4px;
              color: white;
              padding: 3px 2px;
              margin: 0 2px;
          }
         /* end */
         .end {
            background-color: #f2f2f2;
        }

        .end>p {
            padding: 15px 0px;
            position: relative;
            width: 112px;
            height: 22px;
            text-align: center;
            color: #CCC;
            margin: 0px auto;
            font: 18px/22px "Microsoft Yahei", tahoma, arial, "Hiragino Sans GB";
        }

        .end>p>span {
            position: absolute;
            top: 26px;
            width: 97px;
            height: 1px;
            background: #CCC;
        }

        .end>p>span:first-of-type {
            left: -97px;
        }

        .end>p>span:last-of-type {
            right: -97px;
        }
                
         /* footer */
         .footer{
             margin-top: 100px;
            background-color: #333;
            padding: 20px 0;
            position: relative;
            
            
         }
         .service {
            height: 198px;
            width: 1190px;
            padding: 0px 250px;
        }

        .service>ul {
            padding-top: 20px;
            width: 227.5px;
            height: 198px;
            margin: 10px 10px;
            float: left;
            overflow: hidden;
        }

        .service>ul>li {
            width: 227.5px;
            height: 30px;
            float: left;
            text-align: center;
            line-height: 30px;
            color: #b6b6b6;
        }

        .service>ul>li:first-of-type {
            font-size: 18px;
        }

        .service>ul>li>a {
            line-height: 30px;
            color: #b6b6b6;
        }

        .service>ul>li>a:hover {
            color: #f60;
        }

         .copyright {
            border-top: 1px solid #3f3f3f;
            padding: 25px 0;
            text-align: center;
            color: #646464;
            font: 12px;
            margin-top: 35px;
        }
    </style>
</head>
<body>
     <!-- 顶部导航栏 -->
     <div class="nav_wrap">
        <div class="layout nav_content">
            <div class="nav_left iconfont">
                <a href="javascript:;">网站导航&#xe61a;</a>
                <a href="javascript:;">商家入驻&#xe61a;</a>
                <a href="javascript:;">客户服务&#xe61a;</a>
                <a href="javascript:;"> <span class="address">&#xe6ed;</span>  北京  <span>&#xe61a;</span> </a>
           
            </div>
            <div class="nav_right iconfont">
                <a href="javascript:;">请登录</a>
                <a href="javascript:;">注册有奖</a>
                <a href="javascript:;">我的订单</a>
                <a href="javascript:;">我的购物</a>
                <a href="javascript:;">小U会员</a>
                <a href="javascript:;">&#xe772;购物车</a>
                <a href="javascript:;">易付宝</a>
                <a href="javascript:;">企业采购</a>
                <a href="javascript:;">手机小U</a>
            </div>
        </div>
    </div>
    <!-- 左侧边导航 -->
    <ul class="left_nav iconfont">
        <li>
            <a href="javascript:;">特色优选</a>
        </li>
        <li>
            <a href="javascript:;">发现好货</a>
        </li>
        <li>
            <a href="javascript:;">服饰运动</a>
        </li>
        <li>
            <a href="javascript:;">金融阅读</a>
        </li>
        <li>
            <a href="javascript:;">猜你喜欢</a>
        </li>
        <li>
            <a href="javascript:;">&#xe70a; 顶部</a>
        </li>
    </ul>
    <!-- logo容器 -->
    <div class="logo_wrap layout">
        <div>
            <img src="./images/logo.jpg" alt="">
        </div>
        <div class="input_title_wrap">
            <div class="input_wrap iconfont">
                <input class="search_input iconfont" type="text" placeholder="&#xe604; 到店每300减30">
                <input class="search_btn" type="button" value="搜索">
            </div>
            <div class="hotsearch_wrap">
                <span>手机</span>
                <span>电动牙刷</span>
                <span>电视</span>
                <span>海尔空调</span>
                <span>洗衣机</span>
                <span>茅台</span>
                <span>热水器</span>
                <span>ipad</span>
                <span>微波炉</span>
            </div>
        </div>
    </div>
    <!-- 轮播导航 -->
    <div class="layout category_top_wrap iconfont">
        <div class="category_top">&#xe60d; 全部商品分类</div>
        <div class="category_choose">
            <a href="javascript:;">限时抢购</a>
            <a href="javascript:;">红孩子</a>
            <a href="javascript:;">小U商城</a>
            <a href="javascript:;">电器城</a>
            <a href="javascript:;">生活家电</a>
            <a href="javascript:;">时尚服饰</a>
            <a href="javascript:;">金融</a>
        </div>
    </div>
    <div class="banner_wrap">
        <div class="layout ov rel">
            <!-- 左侧导航 -->
            <ul class="category_wrap">
                <li class="category_item">
                    <a href="#">手机</a>
                    <i>|</i>
                    <a href="#">运营商</a>
                    <i>|</i>
                    <a href="#">智能数码</a>
                </li>
                <li class="category_item">
                    <a href="#">空调</a>
                    <i>|</i>
                    <a href="#">电视</a>
                    <i>|</i>
                    <a href="#">冰箱</a>
                    <i>|</i>
                    <a href="#">洗衣机</a>
                </li>
                <li class="category_item">
                    <a href="#">厨卫大电</a>
                    <i>|</i>
                    <a href="#">生活家电</a>
                    <i>|</i>
                    <a href="#">厨具</a>
                </li>
                <li class="category_item">
                    <a href="#">电脑办公</a>
                    <i>|</i>
                    <a href="#">相机</a>
                    <i>|</i>
                    <a href="#">DIY</a>
                </li>
                <li class="category_item">
                    <a href="#">家居</a>
                    <i>|</i>
                    <a href="#">家具</a>
                    <i>|</i>
                    <a href="#">家装</a>
                    <i>|</i>
                    <a href="#">家纺</a>
                </li>
                <li class="category_item">
                    <a href="#">食品</a>
                    <i>|</i>
                    <a href="#">酒水</a>
                    <i>|</i>
                    <a href="#">生鲜</a>
                    <i>|</i>
                    <a href="#">特产</a>
                </li>
                <li class="category_item">
                    <a href="#">美妆</a>
                    <i>|</i>
                    <a href="#">个护</a>
                    <i>|</i>
                    <a href="#">清洁</a>
                    <i>|</i>
                    <a href="#">宠物</a>
                </li>
                <li class="category_item">
                    <a href="#">母婴</a>
                    <i>|</i>
                    <a href="#">玩具</a>
                    <i>|</i>
                    <a href="#">车床</a>
                    <i>|</i>
                    <a href="#">童装</a>
                </li>
                <li class="category_item">
                    <a href="#">运动</a>
                    <i>|</i>
                    <a href="#">户外</a>
                    <i>|</i>
                    <a href="#">足球</a>
                    <i>|</i>
                    <a href="#">跑步机</a>
                </li>
                <li class="category_item">
                    <a href="#">男装</a>
                    <i>|</i>
                    <a href="#">女装</a>
                    <i>|</i>
                    <a href="#">内衣</a>
                    <i>|</i>
                    <a href="#">鞋靴</a>
                </li>
                <li class="category_item">
                    <a href="#">箱包</a>
                    <i>|</i>
                    <a href="#">钟表</a>
                    <i>|</i>
                    <a href="#">珠宝</a>
                    <i>|</i>
                    <a href="#">艺术</a>
                </li>
                <li class="category_item">
                    <a href="#">汽车</a>
                    <i>|</i>
                    <a href="#">汽摩</a>
                    <i>|</i>
                    <a href="#">二手车</a>
                    <i>|</i>
                    <a href="#">车品</a>
                </li>
                <li class="category_item">
                    <a href="#">图书</a>
                    <i>|</i>
                    <a href="#">艺术</a>
                    <i>|</i>
                    <a href="#">原版</a>
                    <i>|</i>
                    <a href="#">文学</a>
                </li>
                <li class="category_item">
                    <a href="#">医药健康</a>
                    <i>|</i>
                    <a href="#">计生情趣</a>
                </li>
                <li class="category_item">
                    <a href="#">理财</a>
                    <i>|</i>
                    <a href="#">分期</a>
                    <i>|</i>
                    <a href="#">保险</a>
                </li>
            </ul>
            <!-- 图片上面的内容 -->
            <div class="banner_info">
                <div>
                    <span>&#xe61c;</span>
                    <span>&#xe61b;</span>
                </div>
                <div class="dian_wrap">
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                </div>
                
            </div>
        </div>
    </div> 
    <!-- 内容 -->
    <div class="main">
        <div class="layout">
            <!-- 限时抢购和大聚会 -->
            <div class="ov">
                <div class="shopping_left">
                    <div class="shopping_top ov">
                        <div class="shopping_top_title">
                            <span>限时抢购</span>
                            <span>距离下场</span>
                            <span>03</span>
                            <span>41</span>
                            <span>16</span>
                        </div>
                        <div class="shopping_top_time">
                            <span>14：00场-正在疯抢</span>
                            <span>16:00场-即将开枪</span>
                        </div>
                    </div>
                    <div class="shopping_bottom">
                        <div class="shopping_item"> 
                            <img src="./images/01.jpg" alt="">
                            <p>[预售2月20日发货]</p>
                            <p class="price_wrap">
                                <span>￥6.6</span>
                                <span>￥19.9</span>
                            </p>
                            <p>已抢35%</p>
                        </div>
                        <div class="shopping_item">
                            <img src="./images/02.jpg" alt="">
                            <p>[预售2月20日发货]</p>
                            <p class="price_wrap">
                                <span>￥6.6</span>
                                <span>￥19.9</span>
                            </p>
                            <p>已抢35%</p>
                        </div>
                        <div class="shopping_item">
                            <img src="./images/04.jpg" alt="">
                            <p>[预售2月20日发货]</p>
                            <p class="price_wrap">
                                <span>￥6.6</span>
                                <span>￥19.9</span>
                            </p>
                            <p>已抢35%</p>
                        </div>
                        <div class="shopping_item">
                            <img src="./images/04.jpg" alt="">
                            <p>[预售2月20日发货]</p>
                            <p class="price_wrap">
                                <span>￥6.6</span>
                                <span>￥19.9</span>
                            </p>
                            <p>已抢35%</p>
                        </div>
                    </div>
                </div>
                <!-- 大聚惠 -->
                <div class="shopping_right">
                    <div class="shopping_right_top iconfont">
                        <span>大聚惠</span><span>更多&#xe8f0;</span>
                    </div>
                    <div class="shopping_right_buttom">
                        <div class="srb_big_img">
                            <div class="srb_border">
                                <div class="srb_content">
                                    <img src="./images/banner02.jpg" alt="">
                                    <p>爆款直降</p>
                                    <p>
                                        <span>仅剩</span>
                                        <span>9小时</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <!-- 三张小图 -->
                        <div class="srb_small_img ov">
                            <div>
                                <img src="./images/banner03.jpg" alt="">
                                <p>爆款低至五折</p>
                            </div>
                            <div>
                                <img src="./images/banner02.jpg" alt="">
                                <p>爆款直降</p>
                            </div>
                            <div>
                                <img src="./images/banner04.jpg" alt="">
                                <p>爆款直降</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 排行榜和好货 -->
            <div class="ranking_hot_wrap ov">
                <div class="ranking_left">
                    <div class="ranking_top">
                        <p>
                            <span>排行榜</span>
                            <span>
                                <span class="more iconfont">更多 &#xe8f0;</span>
                            </span>
                        </p>
                        <p>
                            <span>精选</span>
                            <span>休闲食品</span>
                            <span>纸品清洁</span>
                            <span>干货调味</span>
                        </p>
                    </div>
                    <div class="ranking_list">
                        <div class="ranking_item ov">
                            <div>
                                <img src="./images/list01.jpg" alt="">
                            </div>
                            <div>
                                <p>好时 KISSES好时之吻曲奇奶香白巧克力82g</p>
                                <p class="ranking_goods_price ov">
                                    <span>¥15.5</span>
                                    <span>休闲食品销量No.1</span>
                                </p>
                            </div>
                        </div>
                        <div class="ranking_item ov">
                            <div>
                                <img src="./images/list02.jpg" alt="">
                            </div>
                            <div>
                                <p>蓝月亮 衣领净500g瓶 喷雾头衣领净 衣领清洁剂</p>
                                <p class="ranking_goods_price ov">
                                    <span>¥32.90</span>
                                    <span>纸品清洁销量No.1</span>
                                </p>
                            </div>
                        </div>
                        <div class="ranking_item ov">
                            <div>
                                <img src="./images/list03.jpg" alt="">
                            </div>
                            <div>
                                <p>加加鲜味鲜生抽500ml 酿造生抽酱油 点蘸凉拌菜炒菜调味料调味品</p>
                                <p class="ranking_goods_price ov">
                                    <span>¥5.90</span>
                                    <span>干货调味销量No.1</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hot_right">
                    <p class="ov">
                        <span>人气好货</span>
                        <span class="more iconfont">更多 &#xe8f0;</span>
                    </p>
                    <div class="hot_right_content ov">
                        <div class="hot_item">
                            <img src="./images/item1.jpg" alt="">
                            <p>美的 料理机</p>
                            <p class="iconfont">&#xe604; 318人都说好</p>
                        </div>
                        <div class="hot_item">
                            <img src="./images/item2.jpg" alt="">
                            <p>美的智能微波炉</p>
                            <p class="iconfont">&#xe63e; 318人都说好</p>
                        </div>
                        <div class="hot_item">
                            <img src="./images/item3.jpg" alt="">
                            <p>白猫柔顺高效洗衣液</p>
                            <p class="iconfont">&#xe63e; 318人都说好</p>
                        </div>
                        <div class="hot_item">
                            <img src="./images/item4.jpg" alt="">
                            <p>智能加湿 空气净化器</p>
                            <p class="iconfont">&#xe63e; 318人都说好</p>
                        </div>
                        <div class="hot_item">
                            <img src="./images/item5.jpg" alt="">
                            <p>伊莱克斯 咖啡机</p>
                            <p class="iconfont">&#xe63e; 318人都说好</p>
                        </div>
                        <div class="hot_item">
                            <img src="./images/item6.jpg" alt="">
                            <p>小熊全制动煎药壶</p>
                            <p class="iconfont">&#xe63e; 318人都说好</p>
                        </div>
                        <div class="hot_item">
                            <img src="./images/item7.jpg" alt="">
                            <p>象印不锈钢电水壶</p>
                            <p class="iconfont">&#xe63e; 318人都说好</p>
                        </div>
                        <div class="hot_item">
                            <img src="./images/item8.jpg" alt="">
                            <p>康巴赫防溢不粘炖锅</p>
                            <p class="iconfont">&#xe63e; 318人都说好</p>
                        </div>
                    </div>
                </div>
            </div>
            <div></div>
            <!-- 小广告 -->
            <div class="gg_one ov">
                <img src="./images/img1.jpg" alt="">
                <img src="./images/img2.jpg" alt="">
                <img src="./images/img3.jpg" alt="">
            </div>
            <div class="gg_two ov">
                <div class="gg_two_lfet">
                    <div class="gg_two_lfet_centent iconfont">
                        <p>探索新生活&#xe8f0;</p>
                    </div>
                </div>
                <div class="gg_two_right">
                    <div>
                        <p>小米 大风量 吹风机</p>
                        <img src="./images/k1.webp" alt="">
                    </div>
                    <div>
                        <img src="./images/k2.webp" alt="">
                        <p>雷瑟 机械键盘</p>
                    </div>
                    <div>
                        <p>美心 椰心 鸡蛋卷</p>
                        <img src="./images/k3.webp" alt="">
                    </div>
                    <div>
                        <img src="./images/k4.webp" alt="">
                        <p>不锈钢 梳妆台</p>
                    </div>
                    <div>
                        <p>26支专业套装套刷</p>
                        <img src="./images/k5.webp" alt="">
                    </div>
                </div>
            </div>
            <!-- 分类商品 -->
            <div class="goods ov">
                <div class="goods_item">
                    <div class="goods_title_wrap ov">
                        <div class="goods_title_left iconfont">智能数码 &#xe600;</div>
                        <div class="goods_title_right">
                            <span>智能频道</span>
                            <span>智能音箱</span>
                            <span>智能手表</span>
                            <span>平衡车</span>
                            <span>智能门锁</span>
                        </div>
                    </div>
                    <div class="goods_main ov">
                        <div class="goods_main_left">
                            <div>
                                <p>智能门锁</p>
                                <p>爆款门锁直降</p>
                            </div>
                        </div>
                        <div class="goods_main_right">
                            <div class="goods_main_right_item">
                                <p>小天才手表</p>
                                <p class="iconfont"> 儿童手表</p>
                                <img src="./images/good01.jpg" alt="">
                                
                            </div>
                             <div class="goods_main_right_item">
                                <p>智能数码闹元宵</p>
                                <p class="iconfont">爆款至高12期免息</p>
                                <img src="./images/good02.jpg" alt="">
                            </div>
                            <div>
                                <div class="goods_main_right_item">
                                    <p>家居品类日</p>
                                    <p class="iconfont">领卷下单省100</p>
                                    <img src="./images/good03.jpg" alt="">
                                    
                                </div>
                                <div class="goods_main_right_item">
                                    <p>智能潮品</p>
                                    <p class="iconfont">爆款低至79元</p>
                                    <img src="./images/good04.jpg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="goods_item">
                    <div class="goods_title_wrap ov">
                        <div class="goods_title_left iconfont">汽车 &#xe600;</div>
                        <div class="goods_title_right">
                            <span>苏宁汽车</span>
                            <span>汽车广场</span>
                            <span>易好车</span>
                            <span>车管家</span>
                        </div>
                    </div>
                    <div class="goods_main ov">
                        <div class="goods_main_left_l">
                            <div>
                                <p>车载空净半价购</p>
                                <p>健康保价</p>
                            </div>
                        </div>
                        <div class="goods_main_right">
                            <div class="goods_main_right_item">
                                <p>新车会场</p>
                                <p class="iconfont"> 购车送油卡</p>
                                <img src="./images/good05.jpg" alt="">
                                
                            </div>
                             <div class="goods_main_right_item">
                                <p>品质二手车</p>
                                <p class="iconfont">首付低至一成</p>
                                <img src="./images/good06.jpg" alt="">
                            </div>
                            <div>
                                <div class="goods_main_right_item">
                                    <p>分期购车</p>
                                    <p class="iconfont">一成首付 妙提新车</p>
                                    <img src="./images/good07.jpg" alt="">
                                    
                                </div>
                                <div class="goods_main_right_item">
                                    <p>电摩新年焕新</p>
                                    <p class="iconfont">爆品预售定金翻倍低</p>
                                    <img src="./images/good08.jpg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 棕色分类商品 -->
            <div class="goods ov">
                <div class="goods_item">
                    <div class="goods_title_wrap ov">
                        <div class="goods_title_left_b iconfont">生活家电 &#xe600;</div>
                        <div class="goods_title_right">
                            <span>生活电器</span>
                            <span>炊具</span>
                            <span>厨房电器</span>
                            <span>个人健康</span>
                        </div>
                    </div>
                    <div class="goods_main ov">
                        <div class="goods_main_left_b_l">
                            <div>
                                <p>生活电器</p>
                                <p>9.9抢好货</p>
                            </div>
                        </div>
                        <div class="goods_main_right">
                            <div class="goods_main_right_item_b">
                                <p>生活电器</p>
                                <p class="iconfont">戴森直降700</p>
                                <img src="./images/good09.jpg" alt="">
                                
                            </div>
                             <div class="goods_main_right_item_b">
                                <p>烹饪炊具</p>
                                <p class="iconfont">满299减40</p>
                                <img src="./images/good10.jpg" alt="">
                            </div>
                            <div>
                                <div class="goods_main_right_item_b">
                                    <p>除非电器</p>
                                    <p class="iconfont">爆款99元起</p>
                                    <img src="./images/good11.jpg" alt="">
                                    
                                </div>
                                <div class="goods_main_right_item_b">
                                    <p>个护健康智能潮品</p>
                                    <p class="iconfont">爆款买赠好礼</p>
                                    <img src="./images/good12.jpg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="goods_item">
                    <div class="goods_title_wrap ov">
                        <div class="goods_title_left_b iconfont">家装建材 &#xe600;</div>
                        <div class="goods_title_right">
                            <span>家装狂欢购</span>
                            <span>家具馆</span>
                            <span>卫浴馆</span>
                            <span>家装馆</span>
                        </div>
                    </div>
                    <div class="goods_main ov">
                        <div class="goods_main_left_b_r">
                            <div>
                                <p>车载空净半价购</p>
                                <p>健康保价</p>
                            </div>
                        </div>
                        <div class="goods_main_right">
                            <div class="goods_main_right_item_b">
                                <p>A家家具</p>
                                <p class="iconfont"> 购车送油卡</p>
                                <img src="./images/good13.png" alt="">
                                
                            </div>
                             <div class="goods_main_right_item_b">
                                <p>卫浴室</p>
                                <p class="iconfont">首付低至一成</p>
                                <img src="./images/good14.png" alt="">
                            </div>
                            <div>
                                <div class="goods_main_right_item_b">
                                    <p>五金电工</p>
                                    <p class="iconfont">一成首付 妙提新车</p>
                                    <img src="./images/good15.jpg" alt="">
                                    
                                </div>
                                <div class="goods_main_right_item_b">
                                    <p>公牛钜惠日</p>
                                    <p class="iconfont">每300减50</p>
                                    <img src="./images/good16.jpg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 小广告 -->
            <div class="gg_one ov">
                <img src="./images/img1.jpg" alt="">
                <img src="./images/img2.jpg" alt="">
                <img src="./images/img3.jpg" alt="">
            </div>
            <!-- 商品 -->
            <div class="floor">
                <div class="floor_top">
                    <h5>猜你喜欢</h5>
                </div>
                <div class="floor_buttom ov">
                    <div class="floor_buttom_goods">
                        <div class="floor_buttom_goods_t">
                            <img src="./images/list_img01.jpg" alt="">
                        </div>
                            <p>三只松鼠_开心果100g休闲零食每日坚果特产炒货干果孕妇无漂白</p>
                        <p class="floor_buttom_goods_b ov">
                            <span>￥44.90</span><span>找相似</span>
                        </p>
                        <p class="floor_buttom_goods_bb">
                            <span>秒杀</span><span>领卷80-5</span>
                        </p>
                    </div>
                    <div class="floor_buttom_goods">
                        <div class="floor_buttom_goods_t">
                            <img src="./images/list_img01.jpg" alt="">
                        </div>
                            <p>【三只松鼠_开心果100g】休闲零食每日坚果特产炒货干果孕妇无漂白</p>
                        <p class="floor_buttom_goods_b ov">
                            <span>￥44.90</span><span>找相似</span>
                        </p>
                        <p class="floor_buttom_goods_bb">
                            <span>秒杀</span><span>领卷80-5</span>
                        </p>
                    </div>
                    <div class="floor_buttom_goods">
                        <div class="floor_buttom_goods_t">
                            <img src="./images/list_img01.jpg" alt="">
                        </div>
                            <p>【三只松鼠_开心果100g】休闲零食每日坚果特产炒货干果孕妇无漂白</p>
                        <p class="floor_buttom_goods_b ov">
                            <span>￥44.90</span><span>找相似</span>
                        </p>
                        <p class="floor_buttom_goods_bb">
                            <span>秒杀</span><span>领卷80-5</span>
                        </p>
                    </div>
                    <div class="floor_buttom_goods">
                        <div class="floor_buttom_goods_t">
                            <img src="./images/list_img01.jpg" alt="">
                        </div>
                            <p>【三只松鼠_开心果100g】休闲零食每日坚果特产炒货干果孕妇无漂白</p>
                        <p class="floor_buttom_goods_b ov">
                            <span>￥44.90</span><span>找相似</span>
                        </p>
                        <p class="floor_buttom_goods_bb">
                            <span>秒杀</span><span>领卷80-5</span>
                        </p>
                    </div>
                    <div class="floor_buttom_goods">
                        <div class="floor_buttom_goods_t">
                            <img src="./images/list_img01.jpg" alt="">
                        </div>
                            <p>【三只松鼠_开心果100g】休闲零食每日坚果特产炒货干果孕妇无漂白</p>
                        <p class="floor_buttom_goods_b ov">
                            <span>￥44.90</span><span>找相似</span>
                        </p>
                        <p class="floor_buttom_goods_bb">
                            <span>秒杀</span><span>领卷80-5</span>
                        </p>
                    </div>
                </div>
                <div class="end">
                    <p><span></span>END
                        <span></END></p>
                </div>
            </div>
            
        </div>
    </div>
    <!-- footer -->
     <div class="footer ov">
        <div class="service">
            <ul>
                <li>购物指南</li>
                <li><a href="">购物流程</a></li>
                <li><a href="">支付方式</a></li>
                <li><a href="">配送方式</a></li>
            </ul>
            <ul>
                <li>售后服务</li>
                <li><a href="">售后政策</a></li>
                <li><a href="">价格保护</a></li>
                <li><a href="">退款说明</a></li>
                <li><a href="">返修/退换货</a></li>
                <li><a href="">取消订单</a></li>
            </ul>
            <ul>
                <li>配送方式</li>
                <li><a href="">上门自提</a></li>
                <li><a href="">211限时达</a></li>
                <li><a href="">配送服务查询</a></li>
                <li><a href="">配送费收取标准</a></li>
                <li><a href="">海外配送</a></li>
            </ul>
            <ul>
                <li>用户帮助</li>
                <li><a href="">免费注册</a></li>
                <li><a href="">找回密码</a></li>
                <li><a href="">常见问题</a></li>
                <li><a href="">优惠券使用</a></li>
            </ul>

        </div>
        <div class="copyright">
            <p> Copyright&copy;2010-2020 小U商城 版权所有 保留一切权利</p>
            <p> 京ICP备10218183 京ICP证161188号 京公网安备 11010802020593号 出版经营许可证新出发京批字第直130052号</p>
        </div>
    </div>
</body>
</html>